<template>
  <view class="v2 box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        class="image1"
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <text> 帮友俱乐部 </text>
      <view class="bang-club-scan">
        <!-- <image src="" mode="" style="width: 100%;height: 100%;"></image> -->
        <!-- #ifdef APP-PLUS -->
        <image
          @click="saoma"
          style="width: 60rpx; height: 60rpx"
          class="index-sousou"
          src="https://pic.bangbangtongcheng.com/static/saoma_1.png"
          mode="widthFix"
        />
        <!-- #endif -->
      </view>
    </view>

    <view class="bang-club-main">
      <swiper
        :indicator-dots="false"
        previous-margin="22px"
        next-margin="11px"
        :autoplay="false"
        :interval="3000"
        :duration="1000"
      >
        <swiper-item class="" v-for="(item, index) in swiperList">
          <view class="bang-club-swiper-item">
            <image
              src="https://pic.bangbangtongcheng.com/static/member/bang-swiper-bg.png"
              mode=""
              class="bang-swiper-bg"
            ></image>
            <view class="bang-swiper-rule">
              <view class="bang-swiper-rule-l">
                <image src="../static/bg.jpg" mode="aspectFill" width="36rpx"></image>
              </view>
              等级规则
            </view>
            <view class="bang-club-t">
              <view class="bang-club-tl">
                <image src="../static/bg.jpg" style="width: 80rpx; height: 80rpx" mode="aspectFill">
                </image>
              </view>
              <view class="bang-club-tr">
                <view :style="'color:' + item.levelLabelColor" class="bang-club-trt text-cut"
                  >密密有限公司，您好！
                </view>
                <view class="bang-club-trb text-cut" :style="'color:' + item.levelLabelColor"
                  >您的帮帮豆余额：50
                </view>
              </view>
            </view>
            <view class="bang-club-b">
              <view class="bang-club-bt">
                <view class="bang-club-bt-line"> </view>
                <view
                  class="bang-club-bt-line-fill"
                  :style="'background-color:' + item.levelLineColor"
                >
                </view>
              </view>
              <view class="bang-club-bb">
                <view class="bang-club-bb-left" :style="'color:' + item.levelLabelColor">
                  {{ item.levelLabel }}
                </view>
                <view class="bang-club-bb-right" :style="'color:' + item.levelLabelColor">
                  距离升级还差410帮帮豆
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="is-merchant-page" v-if="manageStatus != 1">
      <view class="merchant-side">
        <view
          class="merchant-side-item"
          :class="merchantStatusActive == 1 ? 'active' : ''"
          @click="changeMerchantStatus(1)"
        >
          礼品管理
        </view>
        <view
          class="merchant-side-item"
          :class="merchantStatusActive == 2 ? 'active' : ''"
          @click="changeMerchantStatus(2)"
        >
          员工管理
        </view>
        <view
          class="merchant-side-item"
          :class="merchantStatusActive == 3 ? 'active' : ''"
          @click="changeMerchantStatus(3)"
        >
          出入库记录
        </view>
      </view>
      <view class="merchant-mian">
        <template v-if="merchantStatusActive == 1">
          <!-- v-if="merchantDetail" -->
          <view class="merchant-select">
            <!-- <view class="merchant-select2" v-if="!merchantDetail">
							<uni-data-select v-if="merchantDetail" v-model="merchantValue2" placeholder="请选择"
								@change="change22" :clear="false" :localdata="merchantOptions2"></uni-data-select>
						</view> -->
            <view class="merchant-select2">
              <uni-data-select
                v-model="merchantValue"
                placeholder="请选择"
                @change="change11"
                :clear="false"
                :localdata="merchantOptions"
              ></uni-data-select>
            </view>
            <view class="merchant-select2" v-if="merchantDetail">
              <uni-data-select
                v-model="merchantValue2"
                placeholder="请选择"
                @change="change22"
                :clear="false"
                :localdata="merchantOptions2"
              ></uni-data-select>
            </view>
          </view>
          <template v-if="!merchantDetail">
            <view class="merchant1-list">
              <view
                @click.stop="selectGift(i)"
                class="merchant1-item"
                v-for="i in giftInformationList"
              >
                <view class="merchant1-item-left">
                  <image
                    :src="i.giftInformation.giftPicture"
                    mode="aspectFill"
                    class="merchant1-item-img"
                  ></image>
                </view>
                <view class="merchant1-item-right">
                  <view class="merchant1-title">
                    {{ i.giftInformation.giftName }}
                  </view>
                  <view class="merchant1-info" style="white-space: nowrap">
                    <view class="merchany-info-box line1">
                      当月送出：{{ i.inventoryAlertValue }}
                    </view>
                    <view class="merchany-info-box" style="width: auto"> 库存：{{ i.stock }} </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="merchant1-list1-title">
              <text>已送出:{{ curSend }}份</text>
              <text>当前库存:{{ curStock }}份</text>
            </view>
            <view class="merchant1-list1">
              <view class="merchant1-item1" v-for="i in giftDistributionRecord">
                <view>车牌号:{{ i.licensePlateNumber }}</view>
                <view>时间:{{ i.lssuingTime }}</view>
                <view>礼品名称: {{ i.giftName }} X1</view>
                <view style="line-height: 40rpx">发放人:{{ i.issuerName || '谁' }}</view>
              </view>
            </view>
          </template>
        </template>
        <template v-if="merchantStatusActive == 2">
          <view class="merchant2-list">
            <view class="merchant2-head">
              <view class="merchant2-section">员工姓名</view>
              <view class="merchant2-section">手机号</view>
              <view class="merchant2-section">
                <view
                  class="btn c-comfirm-btn status-btn solid"
                  @click="changeMerchantStatusActiveManage"
                  style="
                    width: 123rpx;
                    height: 48rpx;
                    line-height: 48rpx;
                    border-color: #64b6a8;
                    color: #64b6a8;
                  "
                >
                  {{ merchantStatusActiveManage ? '完成' : '管理' }}
                </view>
              </view>
            </view>
            <view class="merchant2-item" v-for="i in employeesList">
              <view class="merchant2-section" @click.stop="selectStaff(i)">
                <!--:class="merchantStatusActiveManage?'operate-status':''" <view class="box-check solids " :class="i.active?'checked':''"
									v-if="merchantStatusActiveManage">

								</view> -->
                {{ i.fullName }}
              </view>
              <view class="merchant2-section">{{ i.cellphoneNumber }}</view>
              <view class="merchant2-section" style="justify-content: flex-end">
                <image
                  @click.stop="merchantOperate(i)"
                  style="
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 48rpx;
                    height: 48rpx;
                  "
                  src="https://pic.bangbangtongcheng.com/static/member/trash.png"
                  mode="aspectFill"
                  v-if="merchantStatusActiveManage"
                >
                </image>
              </view>
            </view>
            <!-- <view v-if="employeesList.length == 0" class="none">
							<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
							<view>没有更多数据了</view>
						</view> -->
            <button
              v-if="merchantStatusActiveManage"
              class="merchant2-btn btn c-comfirm-btn cu-btn"
              @click.stop="merchantOperate()"
            >
              {{ '新增员工(' + employeesList.length + '/5)' }}
            </button>
          </view>
        </template>
        <template v-if="merchantStatusActive == 3">
          <template v-if="!merchantRecordDetail">
            <view class="merchant3-list">
              <view class="merchant3-item" v-for="i in giftInventoryByMerchantsId">
                <view class="merchant3-item-top">
                  <view class="merchant3-item-left" @click="selectGift3(i)">
                    <text class="merchant3-item-left-txt">
                      {{ i.type == 1 ? '礼品送货单' : '礼品退货单' }} </text
                    ><text class="merchant3-item-left-operate"
                      >展开<text class="cuIcon cuIcon-unfold"></text>
                    </text>
                  </view>
                  <view
                    class="merchant3-item-right status-btn cu-success solid"
                    v-if="i.confirmStatus"
                    :class="
                      i.confirmStatus == 0
                        ? ''
                        : i.confirmStatus == 1
                        ? i.type == 1
                          ? 'cu-success'
                          : 'cu-dangerous'
                        : 'cu-cancel'
                    "
                  >
                    {{
                      i.confirmStatus == 0
                        ? ''
                        : i.confirmStatus == 1
                        ? i.type == 1
                          ? '收货成功'
                          : '退货成功'
                        : i.type == 1
                        ? '收货取消'
                        : '退货取消'
                    }}
                    <!-- i==1?'cu-dangerous':i==2?'cu-success':'cu-cancel' -->
                    <!-- {{i==1?'退货成功':i==2?'收货成功':'收货取消'}} -->
                  </view>
                </view>
                <view class="merchant3-item-bottom">
                  {{ i.type == 1 ? '送货' : '退货' }}时间：{{ i.createDate }}
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="merchant3-detail">
              <template v-if="curGift3.type == 2">
                <view class="merchant3-detail-title" @click="selectGift32(i)">
                  <view class="merchant3-detail-title-left">
                    <span class="merchant3-detail-title-name">礼品退货单</span>
                    <view class="merchant3-detail-title-right" v-if="curGift3.confirmStatus">
                      收起<text class="cuIcon-fold"></text>
                    </view>
                  </view>
                  <view
                    v-if="curGift3.confirmStatus == 1"
                    class="merchant3-detail-title-status btn cc-danger-btn status-btn solid"
                    >退货成功
                  </view>
                  <view
                    v-if="curGift3.confirmStatus == 2"
                    class="merchant3-detail-title-status btn cc-cancel-btn status-btn solid"
                    >退货取消
                  </view>
                  <view class="merchant3-detail-title-right" v-if="!curGift3.confirmStatus">
                    收起<text class="cuIcon-fold"></text>
                  </view>
                </view>
              </template>
              <template v-else>
                <view class="merchant3-detail-title" @click="selectGift32()">
                  <view class="merchant3-detail-title-left">
                    <span class="merchant3-detail-title-name">礼品送货单</span>
                    <view class="merchant3-detail-title-right" v-if="curGift3.confirmStatus">
                      收起<text class="cuIcon-fold"></text>
                    </view>
                  </view>
                  <view class="merchant3-detail-title-right" v-if="!curGift3.confirmStatus">
                    收起<text class="cuIcon-fold"></text>
                  </view>
                  <view
                    v-if="curGift3.confirmStatus == 1"
                    class="merchant3-detail-title-status btn cc-success-btn status-btn solid"
                    >收货成功
                  </view>
                  <view
                    v-if="curGift3.confirmStatus == 2"
                    class="merchant3-detail-title-status btn cc-cancel-btn status-btn solid"
                    >收货取消
                  </view>
                </view>
              </template>
              <view class="merchant3-detail-time">
                {{ curGift3.type == 1 ? '送货' : '退货' }}时间：{{ curGift3.createDate }}
              </view>
              <view class="merchant3-list1">
                <view class="merchant3-head">
                  <view class="merchant3-section" style="text-align: left">礼品名称</view>

                  <view class="merchant3-section" style="text-align: center">
                    {{ curGift3.type == 1 ? '送货' : '退货' }}数量
                  </view>
                  <view class="merchant3-section" style="text-align: right">库存总计</view>
                </view>
                <view class="" style="min-height: 420rpx">
                  <view class="merchant3-item1" v-for="i2 in curFrontList">
                    <view class="merchant3-section">{{ i2.giftName }}</view>
                    <view class="merchant3-section">{{ i2.sendNumber }}</view>
                    <view class="merchant3-section">{{ i2.stock }} </view>
                  </view>
                </view>
              </view>
              <view class="merchant3-btn-wrap1" v-if="!curGift3.confirmStatus">
                <view class="merchant3-btn btn c-cancel-btn solid" @click="confirm3(true)">
                  确认{{ curGift3.type == 1 ? '收货' : '退货' }}
                </view>
                <view class="merchant3-btn btn c-cancel-btn solid" @click="confirm3(false)">
                  拒绝{{ curGift3.type == 1 ? '收货' : '退货' }}
                </view>
              </view>
              <view class="merchant3-pagination">
                <view @click="preV3" class="page-pre solid page-btn">
                  <text class="cuIcon-back"></text>
                </view>
                <view class="page-num"> {{ frondendPager.pageNo }}/{{ frontTotalNum }} </view>
                <view @click="nextV3" class="page-next solid page-btn"
                  ><text class="cuIcon-right"></text
                ></view>
              </view>
            </view>
          </template>
        </template>
      </view>
    </view>

    <view class="manage-page" v-if="manageStatus == 1">
      <view class="manage-page-select">
        <text>筛选条件：</text>
        <view class="manage-page-select-wrap">
          <uni-data-select
            v-model="merchantValue3"
            placeholder="请选择"
            @change="change33"
            :clear="false"
            :localdata="merchantOptions3"
          ></uni-data-select>
        </view>
      </view>
      <view class="manage-page-list">
        <view
          class="manage-page-item"
          v-for="(item, index) in merchantListV2"
          @click.stop="goGiftMana(item)"
        >
          <view class="manage-page-item-left">
            <image :src="item.storePicture" mode="aspectFill"></image>
          </view>
          <view class="manage-page-item-right">
            <view class="manage-page-item-title">
              {{ item.merchantName }}
            </view>
            <view class="manage-page-item-info">
              <view class="manage-page-item-info-left"> 上次回访：2023/8/7 </view>
              <view class="manage-page-item-info-right">
                {{ item.distance ? item.distance + 'km' : '' }}
              </view>
            </view>
          </view>
        </view>
        <view v-if="merchantListV2.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="merchantListV2.length != 0 && !downStatus">没有更多了</view>
      </view>
    </view>
    <new-binds ref="newBinds" @leftBtn="leftBtn" @rightBtn="rightBtn"></new-binds>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import newBinds from '@/pages_my/test23.vue'
  export default {
    components: {
      newBinds,
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
      frontTotalNum() {
        return Math.ceil((this.curGift3.giftInfoList || []).length / this.frondendPager.pageSize)
      },
      curFrontList() {
        return (this.curGift3.giftInfoList || []).slice(
          (this.frondendPager.pageNo - 1) * this.frondendPager.pageSize,
          this.frondendPager.pageNo * this.frondendPager.pageSize
        )
      },
    },

    data() {
      return {
        employeesList: [], //员工信息
        frondendPager: {
          pageNo: 1,
          pageSize: 5,
        },
        curGift3: {}, // 出入库当前礼品
        giftInventoryByMerchantsId: [], // 出入库
        curStock: '',
        curSend: '',
        giftInventoryList: [],

        giftDistributionRecord: [],
        giftInformationList: [],
        downStatus: true,
        upStatus: true,
        trigger: false,
        adminParam: {
          pageNo: 1,
          pageSize: 10,
        },
        totalV2: 0,
        merchantListV2: [],
        manageStatus: false, //管理员页面
        userInfo: uni.getStorageSync('Pduser'),
        merchantStatusActiveManage: false, //是商家 活跃2
        merchantRecordDetail: false, //是商家 活跃3 详情
        merchantDetail: false, //是商家 活跃1 详情
        merchantOptions: [
          {
            value: '1',
            text: '全部礼品',
          },
          {
            value: '2',
            text: '玻璃水',
          },
          {
            value: '3',
            text: '洗车卷',
          },
          {
            value: '4',
            text: '多选一专区',
          },
        ],
        merchantOptions2: [
          {
            value: '1',
            text: '最近3天',
          },
          {
            value: '2',
            text: '最近7天',
          },
          {
            value: '3',
            text: '最近30天',
          },
        ],
        merchantOptions3: [
          {
            value: '1',
            text: '距离最近',
          },
          {
            value: '2',
            text: '最近回访时间',
          },
          {
            value: '3',
            text: '最早回访时间',
          },
        ],
        merchantValue3: '', //管理员 selectmodel3
        merchantValue: '1', //是商家 活跃1 selectmodel
        merchantValue2: '', //是商家 活跃1 selectmodel2
        merchantStatusActive: 1, //是商家 活跃1
        isMerchantStatus: true, //是商家

        swiperList: [
          {
            bgc: 'linear-gradient(270deg, #8291A7 0%, #B8C4D4 100%',
            levelLabel: '白银会员',
            levelLabelColor: '#42638D',
            levelLineColor: '#4D6B93',
          },
          {
            bgc: 'linear-gradient(270deg, #8291A7 0%, #B8C4D4 100%',
            levelLabel: '白银会员',
            levelLabelColor: '#42638D',
            levelLineColor: '#4D6B93',
          },
        ],
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    async onLoad(option) {
      this.manageStatus = this.userInfo.whetherAdmin
      if (uni.getStorageSync('locationState') == 1) {
        await this.getLocation()
      }
      if (option.from == 'popup') {
        this.merchantStatusActive = 3

        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getGiftInventoryByMerchantsId', {
            merchantsId: Number(this.userInfo.merchantId),
            ...this.adminParam,
            pageSize: 99,
          })
          .then((res) => {
            this.giftInventoryByMerchantsId = res.giftsForRecords.pageList || []

            this.merchantRecordDetail = true
            this.curGift3 =
              this.giftInventoryByMerchantsId.filter(
                (item) => item.movementNo == JSON.parse(option.e).movementNo
              )[0] || {}
          })
      } else {
        this.getAsyncData()
      }
    },
    methods: {
      triggerScroll(flag) {
        if (flag) {
          this.$nextTick(function () {
            this.scrollTop = this.tempScroll
            uni.pageScrollTo({
              scrollTop: this.scrollTop, // 滚动到页面的目标位置（单位px）
              duration: 0, // 滚动动画的时长，默认300ms，单位 ms
            })
          })
        } else {
          this.tempScroll = this.scrollTop
        }
      },
      goGiftMana(item) {
        uni.navigateTo({
          url: '/pages_my/v2MerchantMana?res=' + encodeURIComponent(JSON.stringify(item)),
        })
      },
      // 是商家 总切换
      changeMerchantStatus(status) {
        this.merchantStatusActive = status
        this.adminParam.pageNo = 1

        this.merchantRecordDetail = false //是商家 活跃3 详情
        this.frondendPager = {
          pageNo: 1,
          pageSize: 5,
        }
        this.merchantDetail = false //是商家 活跃1 详情
        this.giftInventoryList = []
        this.giftInformationList = []
        this.getInitAsyncData()
      },
      // 选择是什么礼品
      selectGift(item) {
        this.curGift = item
        let obj = this.giftInventoryList.filter((item) => this.curGift.id == item.id)[0] || {}
        this.curSend = obj.stock
        this.curStock = obj.sendTotal
        this.merchantDetail = true
        this.adminParam.pageNo = 1

        this.triggerScroll()
        this.getAsyncData()
      },
      // 选择出入库记录的批次
      selectGift3(item) {
        this.triggerScroll()
        setTimeout(() => {
          this.merchantRecordDetail = true
          this.curGift3 = item
        })
      },
      // 确认出入库记录的批次
      confirm3(flag) {
        var param = {
          movementNo: this.curGift3.movementNo,
          merchantsId: this.curGift3.merchantId,
          state: this.curGift3.type,
          confirmStatus: this.curGift3.confirmStatus,
          giftList: this.curGift3.giftInfoList.map((item) => {
            return {
              giftId: item.id,
              number: item.sendNumber,
            }
          }),
        }
        if (flag) {
          //确认
          param.confirmStatus = 1
        } else {
          //拒绝
          param.confirmStatus = 2
        }
        if (this.confirmLoading) {
          return
        }
        this.confirmLoading = true
        this.$myRequest
          .post('/api/mobile/vehicleOwner/auditGiftForRecord', param, {
            header: 'application/json',
          })
          .then((res) => {
            console.log(res)
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            this.getInitAsyncData()
          })

        console.log('param', param)
      },
      selectGift32() {
        this.merchantRecordDetail = false
        this.triggerScroll(true)
      },
      preV3() {
        if (this.frondendPager.pageNo > 1) {
          this.frondendPager.pageNo = this.frondendPager.pageNo - 1
        }
        console.log(this.curGift3.giftInfoList, this.frondendPager.pageNo)
      },
      nextV3() {
        if (
          this.frondendPager.pageNo <
          Math.ceil((this.curGift3.giftInfoList || []).length / this.frondendPager.pageSize)
        )
          this.frondendPager.pageNo = this.frondendPager.pageNo + 1
        console.log(this.curGift3.giftInfoList, this.frondendPager.pageNo)
      },

      // 是商家 员工管理 下拉框1
      change11() {
        // if (this.merchantValue == 1) {
        // 	this.merchantDetail = false
        // }
        if (this.merchantDetail) {
          this.giftDistributionRecord = []
        } else {
          this.giftInformationList = []
        }
        this.getAsyncData()
      },
      // 是商家 员工管理 下拉框2
      change22() {
        this.giftDistributionRecord = []
        this.getAsyncData()
      },
      // 管理员
      change33() {
        this.getAsyncData()
      },
      // 是商家 切换管理
      changeMerchantStatusActiveManage() {
        this.merchantStatusActiveManage = !this.merchantStatusActiveManage
        // 清空选择操作
        this.employeesList.forEach((v) => {
          v.active = false
        })
        // 清空当前弹窗
      },
      // 是商家 选择员工
      selectStaff(i) {
        if (this.merchantStatusActiveManage) {
          i.active = !(this.employeesList.filter((item) => item.id == i.id)[0] || {}).active
        }
      },

      // 是商家 删除还是新增
      merchantOperate(item) {
        if (item) {
          let that = this
          let arr = []
          this.curItem = item
          this.$refs.newBinds.open('binds1')
          // this.employeesList.forEach(v=>{
          // 	if (v.active) {
          // 		arr.push(v.id)
          // 	}
          // })
          // if (arr.length==0) {
          // 	uni.showToast({
          // 		title:"请选择员工",
          // 		icon: "none",
          // 		mask: true,
          // 	});
          // 	return false
          // }

          // 删除
        } else {
          // 新增

          if (this.employeesList.length == 5) {
            uni.showToast({
              title: '最多只能添加5名员工！',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.$off('addeventAddStaff')
          uni.$on('addeventAddStaff', (newStaff) => {
            if (
              this.employeesList.findIndex((item) => item.id == newStaff.id) == -1 &&
              newStaff.id
            ) {
              this.employeesList.push(newStaff)
            }
          })
          uni.navigateTo({
            url: '/pages_owner/carMember/addEmployees',
          })
        }
      },

      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      leftBtn() {
        if (this.manageStatus == 1) {
        } else {
          if (this.merchantStatusActive == 1) {
          } else if (this.merchantStatusActive == 2) {
            this.$refs.newBinds.close('binds1')
          } else if (this.merchantStatusActive == 3) {
          }
        }
      },
      rightBtn() {
        let that = this
        if (this.manageStatus == 1) {
        } else {
          if (this.merchantStatusActive == 1) {
          } else if (this.merchantStatusActive == 2) {
            if (this.staffLoading) {
              return
            }
            this.staffLoading = true
            that.$myRequest
              .post('/api/mobile/vehicleOwner/deleteEmployeeByIds', {
                ids: this.curItem.id,
              })
              .then((res) => {
                this.$refs.newBinds.close('binds1')
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  mask: true,
                })
                that.getEmployeesList()
              })
          } else if (this.merchantStatusActive == 3) {
          }
        }
      },
      getInitAsyncData() {
        this.giftInformationList = [] //1
        // this.giftInventoryByMerchantsId=[]
        this.downStatus = true
        this.adminParam.pageNo = 1
        this.merchantStatusActiveManage = false //是商家 活跃2
        this.merchantRecordDetail = false //是商家 活跃3 详情
        this.merchantDetail = false
        // this.giftInventoryByMerchantsId = [] //3
        this.frondendPager.pageNo = 1 //3
        this.getAsyncData()
      },
      getAsyncData() {
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          console.log('this.merchantStatusActive', this.merchantStatusActive, this.merchantDetail)

          if (this.manageStatus == 1) {
            this.getMerchantList()
          } else {
            if (this.merchantStatusActive == 1) {
              // this.giftInformationList = []

              if (this.merchantDetail) {
                this.giftsMerchantsRecords()
              } else {
                this.adminParam.pageNo = 1
                this.adminParam.pageSize = 99
                this.giftInventory()
                this.giftsMerchants()
              }
            } else if (this.merchantStatusActive == 2) {
              this.getEmployeesList()
            } else if (this.merchantStatusActive == 3) {
              this.adminParam.pageNo = 1
              this.adminParam.pageSize = 99
              this.getGiftInventoryByMerchantsId()
            }
          }
        }, 50)
      },

      getData() {
        if (this.manageStatus == 1) {
          this.getMerchantList()
        } else {
          if (this.merchantStatusActive == 1) {
            this.adminParam.pageNo = 1
            if (this.merchantDetail) {
              this.giftsMerchantsRecords()
            } else {
              this.giftInformationList = []
              this.giftInventory()
              this.giftsMerchants()
            }
          } else if (this.merchantStatusActive == 2) {
          }
        }
      },
      // 获取员工信息
      getEmployeesList() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getMerchantStaffList', {
            merchantId: this.userInfo.merchantId,
          })
          .then((res) => {
            res.merchantStaffs.forEach((v) => {
              v.active = false
            })
            this.staffLoading = false
            this.employeesList = res.merchantStaffs
          })
      },
      // 出入库
      getGiftInventoryByMerchantsId() {
        let that = this
        this.$myRequest

          .get('/api/mobile/vehicleOwner/getGiftInventoryByMerchantsId', {
            merchantsId: Number(this.userInfo.merchantId),
            ...this.adminParam,
            pageSize: 20,
          })
          .then((res) => {
            // this.giftInventoryByMerchantsId = res.merchantGiftDistribution.pageList;
            // 'https://ws.weisou.online/conven//api/mobile/vehicleOwner/getGiftInventoryByMerchantsId'

            // 'https://ws.weisou.online/conven/api/mobile/vehicleOwner/getGiftInventoryByMerchantsId'
            // console.log({merchantsId:this.userInfo.merchantId,...this.adminParam}, JSON.parse(JSON.stringify(res.giftsForRecords.pageList)))
            // if (!(res.giftsForRecords.pageList || []).length) {
            // 	this.downStatus = false;
            // }
            // this.upStatus = true;
            // this.trigger = false;
            // this.confirmLoading = false
            this.giftInventoryByMerchantsId = res.giftsForRecords.pageList || []

            this.triggerScroll(true)
            uni.stopPullDownRefresh()
          })
      },
      // 获取礼品库存
      giftInventory() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getGiftInventory', {
            merchantId: this.userInfo.merchantId,
          })
          .then((res) => {
            this.giftInventoryList = res.merchantGiftDistribution.pageList
          })
      },
      // 商家列表
      getMerchantList() {
        this.upStatus = false
        console.log('222')
        this.$myRequest
          .get('//api/mobile/vehicleOwner/getEnterpriseListByUserId', {
            userId: this.userInfo.id,
            longitude: this.longitude,
            latitude: this.latitude,
            screeningType: this.merchantValue3,
            ...this.adminParam,
          })
          .then((res) => {
            if (!res.enterpriseList.pageList.length) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false

            this.merchantListV2 = this.merchantListV2.concat(res.enterpriseList.pageList)
            uni.stopPullDownRefresh()
            // this.wxUrl = res.r.gz_url;
            // console.log(this.wxUrl)
          })
      },
      // 获取商家发放礼品数据
      giftsMerchants() {
        let that = this
        this.$myRequest

          // .get("/api/mobile/vehicleOwner/getDropDownListGiftInformation", {
          .get('/api/mobile/vehicleOwner/getAllGiftLists', {
            merchantId: this.userInfo.merchantId,
            type: this.merchantValue - 1,
            ...this.adminParam,
          })
          .then((res) => {
            res.GiftLists.pageList.forEach((v) => {
              v.active = false
            })
            // if (!res.GiftLists.pageList.length) {
            // 	this.downStatus = false;
            // }
            // this.upStatus = true;
            // this.trigger = false;
            this.triggerScroll(true)
            this.giftInformationList = this.giftInformationList.concat(res.GiftLists.pageList)
            uni.stopPullDownRefresh()
          })
      },
      // 获取商家礼品发放记录列表
      giftsMerchantsRecords() {
        let that = this
        this.$myRequest

          // .get("/api/mobile/vehicleOwner/getDropDownListGiftInformation", {
          .get('/api/mobile/vehicleOwner/getGiftDistributionRecords', {
            merchantId: this.userInfo.merchantId,
            giftId: this.curGift.giftId,
            timeRange: this.merchantValue2,
            ...this.adminParam,
          })
          .then((res) => {
            this.giftDistributionRecord = res.GiftDistributionRecord.pageList || []
            console.log('this.giftDistributionRecord=', this.giftDistributionRecord)
            // 		res.GiftLists.pageList.forEach(v => {
            // 			v.active = false
            // 		})
            // 		if (!res.GiftLists.pageList.length) {
            // 			this.downStatus = false;
            // 		}
            // 		this.upStatus = true;
            // 		this.trigger = false;

            // 		this.giftInformationList = this.giftInformationList.concat(res.GiftLists.pageList);
            // 		uni.stopPullDownRefresh();
          })
      },

      up() {
        this.merchantListV2 = []
        this.adminParam.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          this.getAsyncData()
        }
      },
      down() {
        if (this.downStatus) {
          this.adminParam.pageNo++
          this.getAsyncData()
        }
      },
      async getLocation() {
        this.getLocation1()
      },
      async getLocation1() {
        let _this = this
        await uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            console.log('111')
            _this.getAsyncData()
          },
          fail(res) {
            console.log(res, '经纬度没有授权')
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              uni.showModal({
                title: '提示',
                content: '您已关闭位置权限或获取位置信息失败',
                success: function (res) {
                  if (res.confirm) {
                    // plus.runtime.openURL("app-settings:");
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
              return false
            }
          },
        })
      },
    },
    onPullDownRefresh() {
      if (this.manageStatus == 1) {
      } else {
        if (this.merchantStatusActive == 1) {
          if (this.merchantDetail) {
          }
        } else if (this.merchantStatusActive == 2) {
        } else if (this.merchantStatusActive == 3) {
        }
      }
      this.up()
    },
    onReachBottom() {
      if (this.manageStatus == 1) {
        this.down()
      } else {
        if (this.merchantStatusActive == 1) {
          if (this.merchantDetail) {
            this.down()
          }
        } else if (this.merchantStatusActive == 2) {
        } else if (this.merchantStatusActive == 3) {
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .cc-success-btn {
    color: #64b6a8 !important;
  }

  .cc-cancel-btn {
    color: #666666 !important;
  }

  .cc-danger-btn {
    color: #e00000 !important;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    // padding-bottom: 130rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }

    p {
      position: absolute;
      // top: 90rpx;
      line-height: 45rpx;
      bottom: 21rpx;
      right: 30rpx;
      font-size: 32rpx;
      color: #fff;
    }
  }

  .is-merchant-page {
    display: flex;
    background-color: #fff;
    min-height: 800rpx;
    border-radius: 40rpx 40rpx 0 0;

    .merchant-side {
      width: 200rpx;
      border-right: 2rpx solid #dcdcdc;

      .merchant-side-item {
        padding: 40rpx 0;
        font-size: 28rx;
        font-weight: 400;
        color: #333333;
        line-height: 28rx;
        cursor: pointer;
        text-align: center;

        &.active {
          color: #64b6a8;
        }
      }
    }

    .merchant-mian {
      flex: 1;

      .merchant-select {
        padding: 24rpx 30rpx 30rpx 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .merchant-select1 {
          width: 240rpx;
        }

        .merchant-select2 {
          width: 198rpx;
        }
      }

      .merchant1-list {
        padding: 0 30rpx;

        .merchant1-item {
          height: 132rpx;
          display: flex;
          margin-bottom: 30rpx;

          .merchant1-item-left {
            .merchant1-item-img {
              width: 132rpx;
              height: 132rpx;
            }
          }

          .merchant1-item-right {
            flex: 1;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;

            .merchant1-title {
              height: 42rpx;
              font-size: 30rpx;
              font-weight: 400;
              color: #333333;
              line-height: 42rpx;
            }

            .merchant1-info {
              font-size: 24rpx;
              font-weight: 400;
              color: #666666;
              line-height: 34rpx;
              display: flex;
              justify-content: space-between;

              .merchany-info-box {
              }
            }
          }
        }
      }

      .merchant1-list1-title {
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        line-height: 42rpx;
        padding: 10rpx 30rpx 20rpx 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .merchant1-list1 {
        padding: 0 30rpx 0 30rpx;

        .merchant1-item1 {
          padding-top: 20rpx;
          border-bottom: 2rpx solid #d8d8d8;

          font-size: 28rpx;
          font-weight: 400;
          color: #666666;
          line-height: 28rpx;

          view {
            line-height: 40rpx;
            margin-bottom: 8rpx;
          }
        }
      }

      .merchant3-list {
        padding: 0 30rpx;

        .merchant3-item {
          border-bottom: 2rpx solid #dcdcdc;
          margin-bottom: 4rpx;
          padding-top: 30rpx;

          .merchant3-item-top {
            margin-bottom: 28rpx;
            font-size: 30rpx;
            font-weight: 400;
            line-height: 34rpx;
            color: #333333;
            display: flex;
            justify-content: space-between;
            position: relative;

            .merchant3-item-left {
              .merchant3-item-left-txt {
                color: #333333;
                margin-right: 20rpx;
                vertical-align: middle;
              }

              .merchant3-item-left-operate {
                font-size: 30rpx;
                font-weight: 400;
                color: #64b6a8;
                line-height: 34rpx;
                vertical-align: middle;

                text {
                  margin-left: 4rpx;
                  font-size: 32rpx;
                  font-weight: 600;
                }
              }

              button {
                border-radius: 2px;
                width: 86px;
                line-height: 29px;
                background-color: transparent;

                &.dangerous {
                  color: #e00000;
                  border-color: #e00000;
                }

                &.con {
                  color: #64b6a8;
                  border-color: #64b6a8;
                }
              }
            }

            .merchant3-item-right {
              position: absolute;
              top: -14rpx;
              right: 0;
              width: 123rpx;
              height: 46rpx;
              line-height: 46rpx;
              text-align: center;
              font-size: 26rpx;
              background-color: transparent;
              border-radius: 6rpx 6rpx 6rpx 6rpx;
              white-space: nowrap;

              &.cu-success {
                border-color: #64b6a8;
                color: #64b6a8;
              }

              &.cu-cancel {
                border-color: #666666;
                color: #666666;
              }

              &.cu-dangerous {
                border-color: #e00000;
                color: #e00000;
              }
            }
          }

          .merchant3-item-bottom {
            color: #3d3d3d;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 28rpx;
            margin-bottom: 20rpx;
          }
        }
      }

      .merchant3-detail {
        position: relative;

        .merchant3-detail-title {
          padding: 0px 30rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .merchant3-detail-title-left {
            padding: 28rpx 0;
            display: flex;
            align-items: center;

            .merchant3-detail-title-name {
              font-size: 30rpx;
              font-weight: 400;
              color: #333333;
              line-height: 34rpx;
              margin-right: 20rpx;
            }
          }
        }

        .merchant3-detail-title-status {
          width: 123rpx;
          line-height: 48rpx;
          margin-top: -12rpx;
          border-color: #e00000;
          color: #e00000;
          background-color: transparent;
        }

        .merchant3-detail-title-right {
          font-size: 30rpx;
          font-weight: 400;
          color: #64b6a8;
          line-height: 34rpx;
          vertical-align: middle;

          text {
            font-size: 32rpx;
          }
        }

        .merchant3-detail-time {
          font-size: 28rpx;
          font-weight: 400;
          color: #3d3d3d;
          line-height: 28rpx;
          padding-left: 30rpx;
          padding-bottom: 20rpx;
          border-bottom: 2rpx solid #d8d8d8;
        }

        .merchant3-list1 {
          padding: 0 30rpx;
          text-align: center;
          // padding-bottom: 96px;

          .merchant3-head {
            display: flex;
            align-items: center;
            margin: 20rpx 0;
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            line-height: 28rpx;

            .merchant3-section {
              flex: 1;
            }
          }

          .merchant3-item1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 64rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #666666;
            line-height: 38rpx;

            .merchant3-section {
              width: 114rpx;
            }
          }
        }

        .merchant3-pagination {
          display: flex;
          align-items: center;
          justify-content: center;

          .page-btn {
            width: 84rpx;
            height: 38rpx;
            text-align: center;
            line-height: 40rpx;
            border-radius: 40rpx;
            opacity: 1;
            border-color: #64b6a8;
            color: #64b6a8;
            text-align: center;

            &.disabled {
            }
          }

          .page-pre {
            font-size: 26rpx;
            font-weight: 400;
            line-height: 40rpx;
          }

          .page-next {
            font-size: 26rpx;
            font-weight: 400;
            line-height: 40rpx;
          }

          .page-num {
            color: #666666;
            font-size: 28rpx;
            margin: 0 24rpx;
          }
        }

        .merchant3-btn-wrap1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18rpx;
          font-weight: 400;
          color: #666666;
          padding: 0 30rpx;
          margin-bottom: 30rpx;
          text-align: center;

          .merchant3-btn {
            width: 220rpx;
            height: 58rpx;
            line-height: 58rpx;
            border-color: #64b6a8;
            color: #64b6a8;
            background-color: transparent;
          }
        }
      }

      .merchant2-list {
        padding: 16rpx 30rpx 10rpx 30rpx;
        min-height: 860rpx;
        position: relative;

        .merchant2-btn {
          position: absolute;
          bottom: 16rpx;

          left: 50%;
          transform: translateX(-50%);
          width: 470rpx;
          height: 80rpx;
          line-height: 80rpx;
          background: #64b6a8;
          border-radius: 49rpx 49rpx 49rpx 49rpx;
          opacity: 1;
          text-align: center;

          font-size: 34rpx;
          font-weight: 400;
          color: #ffffff;

          bottom: 16rpx;
          bottom: calc(16rpx + constant(safe-area-inset-bottom));
          bottom: calc(16rpx + env(safe-area-inset-bottom));
        }

        .merchant2-head {
          font-size: 30rpx;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
          padding-bottom: 10rpx;
          text-align: left;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;

          .merchant2-section {
            width: 123rpx;
            white-space: nowrap;
          }
        }

        .merchant2-item {
          padding: 30rpx 0 20rpx 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: left;
          position: relative;
          color: #3d3d3d;
          border-bottom: 2rpx solid #d8d8d8;

          .box-check {
            width: 16px;
            height: 16px;
            background: #ffffff;
            opacity: 1;
            border-color: #64b6a8;
            border-radius: 50%;
            position: absolute;
            top: 56%;
            left: 0px;
            transform: translateY(-50%);

            &::after {
              border-width: 4rpx;
            }

            &.checked::before {
              content: '';
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);

              width: 11px;
              height: 11px;
              background: #64b6a8;
              border-radius: 50%;
            }
          }

          .merchant2-section {
            display: flex;
            align-items: center;
            width: 123rpx;
            white-space: nowrap;
            position: relative;
            line-height: 1.2;

            &.operate-status {
              padding-left: 52rpx;
            }
          }
        }

        .merchant2-section {
        }
      }
    }
  }

  .status-btn {
    text-align: center;
    font-size: 26rpx;
    background-color: transparent;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    white-space: nowrap;

    &.cu-success {
      border-color: #64b6a8;
      color: #64b6a8;
    }

    &.cu-cancel {
      border-color: #666666;
      color: #666666;
    }

    &.cu-dangerous {
      border-color: #e00000;
      color: #e00000;
    }
  }

  .v2 {
    ::v-deep {
      .uni-select {
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        opacity: 1;
        border: 2rpx solid #d8d8d8;

        .uni-select__input-placeholder {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .uni-select__input-text {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .uni-icons.uniui-top,
        .uni-icons.uniui-bottom {
          color: #64b6a8;
          font-size: 32rpx !important;
        }

        .uni-select__selector-item {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          line-height: 56rpx;
        }
      }
    }
  }

  .bang-club-scan {
    position: absolute;
    bottom: 15rpx;
    right: 30rpx;
    width: 56rpx;
    height: 56rpx;
    // background-color: white;
  }

  .bang-club-main {
    width: 750rpx;
    height: 400rpx;
    background: linear-gradient(180deg, #64b6a8 0%, #64b6a8 100%);
    opacity: 1;
    margin-top: -32rpx;
    padding-top: 32rpx;
    display: flex;
    align-items: center;

    swiper {
      width: 100%;
      height: 320rpx;
    }

    .bang-club-swiper-item {
      position: relative;
      width: 664rpx;
      height: 320rpx;
      background: linear-gradient(270deg, #8291a7 0%, #b8c4d4 100%);
      border-radius: 25rpx 25rpx 25rpx 25rpx;
      opacity: 1;
      padding: 40rpx 40rpx 32rpx 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;

      .bang-swiper-rule {
        display: flex;
        align-items: center;
        position: absolute;
        top: 40rpx;
        right: 0;
        width: 160rpx;
        height: 46rpx;
        background: #ffffff;
        border-radius: 23rpx 0rpx 0rpx 23rpx;
        opacity: 1;

        font-size: 24rpx;
        font-weight: normal;
        color: #64b6a8;
        line-height: 34rpx;

        .bang-swiper-rule-l {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: #64b6a8;
          opacity: 1;
          margin-left: 3rpx;
          margin-right: 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            height: 36rpx;
            border-radius: 50%;
          }
        }
      }

      .bang-swiper-bg {
        position: absolute;
        width: 315rpx;
        height: 315rpx;
        left: 458rpx;
        top: 84rpx;
      }

      .bang-club-t {
        display: flex;

        .bang-club-tl {
          image {
            border-radius: 50%;
          }
        }

        .bang-club-tr {
          padding: 9rpx 0 9rpx 12rpx;
          width: 384rpx;

          .bang-club-trt {
            margin-bottom: 12rpx;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 28rpx;
          }

          .bang-club-trb {
            font-size: 22rpx;
            font-weight: normal;
            line-height: 22rpx;
          }
        }
      }

      .bang-club-b {
        position: relative;
        z-index: 2;

        .bang-club-bt {
          margin-bottom: 22rpx;
          height: 10rpx;
          position: relative;

          .bang-club-bt-line {
            width: 100%;
            height: 100%;
            background: #ffffff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 0.5;
          }

          .bang-club-bt-line-fill {
            position: absolute;
            left: 0;
            top: 0%;
            width: 50%;
            height: 100%;
            background: #4d6b93;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
        }

        .bang-club-bb {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .bang-club-bb-left {
            font-size: 36rpx;
            font-weight: 400;
            line-height: 36rpx;
          }

          .bang-club-bb-right {
            font-size: 24rpx;

            font-weight: 400;
            line-height: 34rpx;
          }
        }
      }
    }
  }

  .manage-page {
    width: 750rpx;
    // height: 1110rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    padding: 24rpx 30rpx 0 30rpx;

    .manage-page-select {
      display: flex;
      align-items: center;
      justify-content: space-between;

      font-size: 28rpx;
      font-weight: 400;
      color: #666666;

      // line-height: 39rpx;
      text {
        // flex: 1;
      }

      ::v-deep {
        .uni-stat__select {
          width: 120px;

          .uni-select {
            width: 240rpx;
          }
        }
      }
    }

    .manage-page-list {
      margin-top: -8rpx;

      .manage-page-item {
        display: flex;
        padding: 32rpx 0;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

        .manage-page-item-left {
          image {
            width: 310rpx;
            height: 200rpx;
            box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(67, 67, 67, 0.102);
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            opacity: 1;
          }
        }

        .manage-page-item-right {
          padding-left: 30rpx;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .manage-page-item-title {
            font-size: 30rpx;
            font-weight: 400;
            color: #333333;
            line-height: 42rpx;
          }

          .manage-page-item-info {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
            line-height: 34rpx;
          }
        }
      }
    }
  }
</style>
